<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-3</title>
  <style>

      .row{
        padding: 10px;
      }

       .col-4{
          float: left;
          width: 33.3%;
       }

      .col-8{
        float: left;
        width: 66.6%;
      }
  </style>
</head>
<body>
<div id="root">

</div>
</body>
<script src="../../lib/react/react.development.js"></script>
<script src="../../lib/react/react-dom.development.js"></script>
<script src="../../lib/react/babel.min.js"></script> <!--jsx -->
<script type="text/babel">

  let Logo = function (props) {
    return <h1>{props.title}</h1>
  }

  let Siders = function () {
    return <div>navs</div>
  }

  let Content = function (props) {
    return <div>{props.content}</div>
  }

  let ele = <div class="container">
    <div class="row">
      <Logo title="合创未来"/>
    </div>
    <div class="row">
      <div class="col-4"><Siders/></div>
      <div className="col-8" ><Content content="welcome to the big city！"/></div>
    </div>
  </div>

  ReactDOM.render(ele,document.getElementById('root'))

</script>
</html>
